import React from "react"
import styles from '@/assets/css/coupon-info.module.css'

export default () => {
    let cid = React.params('cid')

    let [coupon, SetCoupon] = useState({
        receive: false,
        id: 0,
        thumb_text: '',
        rate: 1,
        title: '',
        status_text: '',
        total: 0,
        createtime_text: '',
        endtime_text: ''
    })

    let [receiveList, SetReceiveList] = useState([])

    useEffect(() => {
        GetInfo()
    }, [])

    // 获取优惠劵详情
    const GetInfo = async () => {
        let params = {
            busid: React.business.id,
            cid
        }

        let result = await React.request.post('/coupon/CouponInfo', params)

        if(result.code == 0)
        {
            React.toast(result.msg, 'fail', 'back')
            return false
        }

        SetCoupon(result.data.coupon)
        SetReceiveList(result.data.receive)
    }

    // 领取或已领取
    const ReceiveBtn = () => {
        if(coupon.receive)
        {
            return (
                <img src={require('@/assets/images/receive.png')} alt="" 
                    style={{width: '60px', height: '60px', marginLeft: '15px'}}/>
            )               
        } else
        {
            return (
                <React.UI.Button onClick={TakeCoupon} color='primary' fill='outline' size='small'>立即领取</React.UI.Button>
            )
        }
    }

    // 领取用户
    const Receive = () => {
        if(receiveList.length > 0)
        {
            return (
                <div className={styles.business}>
                    <React.UI.Swiper loop autoplay direction='vertical' style={{'--height': '125px'}} indicator={() => null}>
                        {receiveList.map((item: any, key: number) => (
                            <React.UI.Swiper.Item key={key}>
                                <div className={styles.info}>
                                    <div className={styles.left}>
                                        <img src={item.business.avatar_text} alt="" />
                                    </div>

                                    <div className={styles.right}>
                                        <div className={styles.nickname}>{item.business.nickname}</div>
                                        <div className={styles.gender}>性别：{item.business.gender_text}</div>
                                        <div className={styles.region}>地区：{item.business.region_text}</div>
                                        <div className={styles.time}>领取时间：{item.createtime_text}</div>
                                    </div>
                                </div>
                            </React.UI.Swiper.Item>
                        ))}
                    </React.UI.Swiper>
                </div>
            )
        } else
        {
            return (
                <div className={styles.business}>
                    <React.UI.Empty description='暂无领取用户' />
                </div>
            )
        }
    }

    // 领取优惠劵
    const TakeCoupon = async () => {
        // 判断是否登录
        if(Object.getOwnPropertyNames(React.business).length <= 0)
        {
            React.toast('请先登录', 'fail')
            return false
        }
        
        React.UI.Dialog.confirm({
            title: '领取提醒',
            content: '是否确认领取该优惠劵',
            onConfirm: async () => {
                let params = {
                    busid: React.business.id,
                    cid: coupon.id
                }

                let result = await React.request.post('/coupon/CouponReceive', params)

                if(result.code == 0)
                {
                    React.toast(result.msg, 'fail')
                    return false
                }

                React.toast(result.msg, 'success')
                SetCoupon({
                    ...coupon,
                    receive: true
                })
            }
        }).catch(() => {})
    }

    return (
        <>
            <div className={styles.header}>
                <React.UI.NavBar back="返回" onBack={() => React.navigate(-1)}>优惠劵详情</React.UI.NavBar>
            </div>

            <div className={styles.couponInfo}>
                <div className={styles.top}>
                    <img src={coupon.thumb_text} alt="" />
                </div>

                <div className={styles.detail}>
                    <div className={styles.left}>
                        <div className={styles.rate}>{(coupon.rate * 10).toFixed(1)}<span>折</span></div>
                    </div>

                    <div className={styles.right}>
                        <div className={styles.info}>
                            <div className={styles.title}>{coupon.title}</div>
                            <div className={styles.status}>{coupon.status_text}</div>
                        </div>
                        
                        <div className={styles.receive}>
                            <ReceiveBtn />
                        </div>
                    </div>
                </div>

                <ul className={styles.message}>
                    <li>
                        <React.ICON.ExclamationTriangleOutline style={{marginRight: '5px'}}/>
                        共发放<span style={{color: '#9c9efa'}}>{coupon.total}</span>张，每人限领<span style={{color: '#9c9efa'}}>1</span>张
                    </li>
                    <li>
                        <React.ICON.ClockCircleOutline style={{marginRight: '5px'}} />
                        优惠开始时间：{coupon.createtime_text}
                    </li>
                    <li>
                        <React.ICON.ClockCircleOutline style={{marginRight: '5px'}} />
                        优惠结束时间：{coupon.endtime_text}
                    </li>
                </ul>
            </div>

            {/* 已领取用户 */}
            <div className={styles.received}>
                <React.UI.Divider style={{fontSize: '15px'}}>已领取用户</React.UI.Divider>
                <Receive />
            </div>
        </>
    )
}